<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, user-scalable=false'>
  <style type='text/css'>
    body {
      background-color: #eee;
      background-position: top;
      background-repeat: repeat-x;
      font-family: "Open Sans", "OpenSans", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
      line-height: 20px;
      color: #333;
      margin: 0;
      padding-top: 20px;
    }

    table.layout > tr > td {
      background-color: white;
      padding: 0;
    }

    table.layout > tr > td.header {
      padding: 0 20px;
      text-align: center;
    }

    .header h2 {
      margin-top: 20px;
      margin-bottom: 10px;
      font-size: 22px;
      line-height: 26px;
    }

    .header h1 {
      margin-top: 0;
      margin-bottom: 20px;
      font-size: 26px;
      line-height: 30px;
    }

    .header h2 a, .header h1 a, .content h2 a, .content h3 a {
      text-decoration: none;
    }

    .content h2, .content h3 {
      margin-bottom: 20px;
      margin-top: 10px;
    }

    a {
      color: {{ color }};
      font-weight: bold;
    }

    a:hover, a:focus {
      color: {{ color }};
      text-decoration: underline;
    }

    a:hover, a:active {
      outline: 0;
    }

    p {
      margin: 0 0 10px;

      /* These are technically the same, but use both */
      overflow-wrap: break-word;
      word-wrap: break-word;
      word-break: break-word;

      -ms-word-break: break-all;

      /* Adds a hyphen where the word breaks, if supported (No Blink) */
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto;
    }
    p:last-child {
      margin-bottom: 0;
    }

    .footer {
      padding: 10px;
      text-align: center;
      font-size: 12px;
    }

    .content {
      padding: 0 18px;
    }

    ::selection {
      background: {{ color }};
      color: #FFF;
    }

    table.layout {
      width: 100%;
      max-width: 600px;
      border-spacing: 0px;
      border-collapse: separate;
      margin: auto;
    }

    img.wide {
      width: 100%;
      height: auto;
    }

    .content table {
      width: 100%;
    }

    .content table td {
      vertical-align: top;
      text-align: left;
      padding: 0;
    }

    a.button {
      display: inline-block;
      padding: 10px 16px;
      font-size: 14px;
      line-height: 1.33333;
      border: 1px solid #cccccc;
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      margin: 5px;
      text-decoration: none;
      color: {{ color }};
    }

    .order-button {
      padding-top: 5px
    }
    .order-button a.button {
      font-size: 12px;
    }
    .order-info {
      padding-bottom: 5px
    }

    .order {
      font-size: 12px;
    }

    .cart-table > tr > td:first-child {
      width: 40px;
    }
    .order-details > tr > td:first-child {
      width: 20%;
    }
    .order-details td {
      font-size: 12px;
    }

    {% if rtl %}
      body {
        direction: rtl;
      }
      .content table td {
        text-align: right;
      }
    {% endif %}

    {% block addcss %}{% endblock %}
  </style>
  <!--[if mso]>
    <style type="text/css">
    body, table, td {
      font-family: "Open Sans", "OpenSans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    }
    </style>
  <![endif]-->
</head>
<body align='center'>
    <!--[if gte mso 9]>
    <table width="100%"><tr><td align="center">
    <table width="600"><tr><td align="center"
    <![endif]-->
    <table class='layout' width='600' border='0' cellspacing='0'>
      <!--[if !mso]><!-- -->
      <tr>
        <td style='line-height: 0'>
          <img class='wide' src='' style='max-height: 60px;'>
        </td>
      </tr>
      <!--<![endif]-->
      <tr>
        <td class='header' align='center'>
          <!--[if gte mso 9]>
            <table cellpadding='20'><tr><td align='center'>
          <![endif]-->
          {% if event %}
            <h2><a href="{{ url_for('presale:event.index', event=event) }}" target='_blank'>{{ event.name }}</a></h2>
          {% else %}
            <h2><a href='{{ site_url }}' target='_blank'>{{ site }}</a></h2>
          {% endif %}
          {% block header %}
            <h1>{{ subject }}</h1>
          {% endblock %}
          <!--[if gte mso 9]>
            </td></tr></table>
          <![endif]-->
        </td>
      </tr>
      {% include 'eventyay/email/separator.jinja' %}
      {% block content %}
      {% endblock %}
      <!--[if !mso]><!-- -->
      <tr>
        <td style='line-height: 0'>
          <br>
          <img class='wide' src='' style='max-height: 60px;'>
        </td>
      </tr>
      <!--<![endif]-->
    </table>
    <div class='footer'>
        {% include 'eventyay/email/email_footer.jinja' %}
    </div>
    <br/>
    <br/>
    <!--[if gte mso 9]>
    </td></tr></table>
    </td></tr></table>
    <![endif]-->
</body>
</html>
